<%@page import="java.util.Calendar"%>
<%@page import="aviso.util.CssUtil"%>
<%@page contentType="text/css"%>
<%
    int bgcolor = 0xeaeef1;
    int shadow = 0x444444;
    int trasptest = 0xffffff88;
    float sec = Calendar.getInstance().get(Calendar.MILLISECOND) / 1000f;
    int mapw = 600;
    int maph = 400;
    int mapborder = 20;
    int fullwidth = 1022;
    int maprightform = fullwidth - mapw - mapborder;

%>
<style>
    __{}

    /*Reset CSS*/
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    caption,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }

    table,tbody, tfoot, thead, tr, th, td
    {

    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    /*End reset*/
    body { background-color: <%=CssUtil.resH(bgcolor)%>;
           font-size: 12px; 
           padding: 0;
           margin: 0;
    }
    h3{background-color: <%=CssUtil.resH(bgcolor - shadow)%>}
    h3{background-color: <%=CssUtil.resAsRGBA(trasptest)%>}
    h3{background-color: <%=CssUtil.resAsRGB(shadow)%>}
    h3{background-color: <%=CssUtil.resAsRGBA(bgcolor - shadow, sec)%>}



    .wraper , #wraper {width: <%=fullwidth%>px; margin: 0 auto; }

    .body_background{
        -background-image:url("../images/browser_widths.gif") 
    }
    .hide{ display: none; }
    .show{ display:inherit; }
    .map{
        width: <%=mapw%>px;
        height: <%=maph%>px;
        -float: left;
    }
    .mapborder{
        width: <%=mapw + mapborder%>px;
        height: <%=maph + mapborder%>px;
        -float: left;
    }
    .rangex{
        border-width:0px 35px 0px 35px;
        -moz-border-image: url("../images/arrows.png") 0 35; /* Firefox */
        -webkit-border-image: url("../images/arrows.png") 0 35; /* Safari and Chrome */
        -o-border-image: url("../images/arrows.png") 0 35 ; /* Opera */
        border-image: url("../images/arrows.png") 0 35 ;
        -float:left;   
        transform: rotate(90deg);
        position: relative;
        -top:<%=maph%>px;
        -left: <%=-mapw%>px;
        width: <%=mapw - 70%>px;
        -height: <%=maph%>px;
        text-align: center;


    }
    .rangey{
        border-width:0px 35px 0px 35px;
        -moz-border-image: url("../images/arrows.png") 0 35; /* Firefox */
        -webkit-border-image: url("../images/arrows.png") 0 35; /* Safari and Chrome */
        -o-border-image: url("../images/arrows.png") 0 35 ; /* Opera */
        border-image: url("../images/arrows.png") 0 35 ;
        -float:left;   
        transform: rotate(90deg);
        -ms-transform: rotate(90deg); /* IE 9 */
        -webkit-transform: rotate(90deg); /* Safari and Chrome */
        -o-transform: rotate(90deg); /* Opera */
        -moz-transform: rotate(90deg); /* Firefox */
        position: relative;
        top:<%=-maph / 2 - 25%>px;
        left: <%=mapw - maph / 2 + 6%>px;
        width: <%=maph - 70%>px;
        -height: <%=maph%>px;
        text-align: center;


    }
    .advs_scroll{
        height: <%=maph + mapborder%>px;
        overflow-y: scroll;
    }
    .advsquery_scroll
    {
        height: 230px;
        overflow-y: scroll;

    }
    .label_width
    {
        width: 130px;
    }

    .mapright{width: <%=maprightform%>px;
              vertical-align: top;
    }

    /*
    adv styles
    */
    .advlistimage{
        width: 70px;
        height: 70px;
        margin-right: 10px;
    }

    .twocol
    {


    }

    .center70
    {
        margin-left:auto;
        margin-right:auto;
        width:70%;
        background-color:#b0e0e6;
    }


    .center50
    {
        margin-left:auto;
        margin-right:auto;
        width:70%;
        background-color:#b0e0e6;
    }

    .fg-button { outline: 0; margin:0 4px 0 0; padding: .5em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
    .fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }

    -a.fg-button { float:left; }

    /* remove extra button width in IE */
    button.fg-button { width:auto; overflow:visible; }

    .fg-button-icon-left { padding-left: 2.1em; }
    .fg-button-icon-right { padding-right: 2.1em; }
    .fg-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; }
    .fg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }

    .fg-button-icon-solo { display:block; width:8px; text-indent: -9999px; }	 /* solo icon buttons must have block properties for the text-indent to work */	

    .fg-buttonset { float:left; }
    .fg-buttonset .fg-button { float: left; }
    .fg-buttonset-single .fg-button, 
    .fg-buttonset-multi .fg-button { margin-right: -1px;}

    .fg-toolbar { padding: .5em; margin: 0;  }
    .fg-toolbar .fg-buttonset { margin-right:1.5em; padding-left: 1px; }
    .fg-toolbar .fg-button { font-size: 1em;  }


    .curLocaletrue{
        font-weight: bold;
    }
    .curLoaclefalse{

    }

    .hidetrue{display:none}
    .hidefalse{display:inherit}

    
    .clear
    {
        clear: both;
    }
    .clearleft
    {
        clear: left;
    }
    .clearright
    {
        clear: right;
    }
    .floatrigth{
        float: right;
    }
    .floatleft{
        float: left;
    }

</style>